<template>
  <div class="good_item" @click="toDesc(info.id)">
    <img :src="brageImgUrl" alt="" class="brage">
    <div class="img_wrap">
      <img :src="info.image" alt="">
    </div>
    <div class="handle">
      <p class="title clearfix">{{ info.name }}<span>原价：{{ info.old_price }}元</span></p>
      <p class="tags clearfix">{{ info.feature }}<span>活动价:￥<b>{{ info.price }}</b></span></p>
      <div class="button flex">
        <div class="good_weight">商品净重: {{ info.tag1 }}</div>
        <div class="order_button">
          <input type="button" v-model="buttonText">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonText: '立即抢购',
      brageImgUrl: '@/assets/2.png'
    };
  },
  props: ["info"],
  created() {
    this.info.id === '79' ? this.buttonText = '免费领取': this.buttonText;
    this.info.id === '79' ? this.brageImgUrl = require('@/assets/3.png') : this.brageImgUrl = require('@/assets/2.png');
  },
  methods: {
    toDesc(id) {
      this.$router.push(
        "/mid-autumn_good_item?good_id=" +
          id +
          "&username=" +
          this.$store.state.urlParams.username +
          "&platform=" +
          this.$store.state.urlParams.platform
      );
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.good_item {
  img {
    pointer-events: none; 
  }
  margin-top: to(15);
  // padding-bottom: to(30);
  position: relative;
  .brage {
    position: absolute;
    top: 0;
    left: 0;
    width: to(70);
    display: block;
  }
  .img_wrap {
    width: 100%;
    height: to(305);
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .handle {
    p {
      padding: 0 to(15);
    }
    .title {
      font-size: to(30);
      line-height: to(65);
      color: #720000;
      span {
        float: right;
        font-size: to(23);
        color: #5c5c5c;
        text-decoration: line-through;
      }
    }
    .tags {
      font-size: to(22);
      color: #000;
      line-height: to(65);
      span {
        float: right;
        font-size: to(24);
        color: #c10000;
        line-height: to(55);
        font-weight: 700;
        b {
          font-size: to(45);
        }
      }
    }
    .button {
      text-align: center;
      height: to(65);
      .good_weight {
        flex: 5;
        background-color: #FF6E7C;
        color: white;
        font-size: to(30);
        text-align: center;
        line-height: to(65);
      }
      .order_button {
        flex: 3;
        position: relative;
        input {
          line-height: to(65);
          top: 0;
          right: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          border: 0;
          background-color: #FFEA00;
          color: #FF394C;
          font-size: to(31);
        }
      }
    }
  }
}
</style>
